<template>
    <div class="app-container">
        <el-descriptions direction="vertical" :column="6" size='default' border>
            <el-descriptions-item label="名称">{{ myData?.id }}</el-descriptions-item>
            <el-descriptions-item label="优惠券类型">{{ myData?.name }}</el-descriptions-item>
            <el-descriptions-item label="可使用商品">
                {{ myData?.useType == 0 ? '全场通用' : myData?.useType == 1 ? '指定分类' : '指定商品'
                }}
            </el-descriptions-item>
            <el-descriptions-item label="使用门槛">
                满 {{ myData?.minPoint }}可用
            </el-descriptions-item>
            <el-descriptions-item label="面值">
                {{ myData?.amount }}元
            </el-descriptions-item>
            <el-descriptions-item prop="orderCount" label="状态"> 已过期</el-descriptions-item>
            <el-descriptions-item label="有效期">
                <div>
                    {{ dayjs(myData?.enableTime).format('YYYY-MM-DD HH:mm:ss') }}至

                    {{ dayjs(myData?.endTime).format('YYYY-MM-DD HH:mm:ss') }}

                </div>
            </el-descriptions-item>
            <el-descriptions-item label="总发行量">{{ myData?.name }}</el-descriptions-item>
            <el-descriptions-item label="已领取">{{ myData?.receiveCount }}</el-descriptions-item>
            <el-descriptions-item label="待领取">{{ myData?.count }}</el-descriptions-item>
            <el-descriptions-item label="已使用">{{ myData?.useCount }}</el-descriptions-item>
            <el-descriptions-item label="未使用">{{ myData?.publishCount }}</el-descriptions-item>
        </el-descriptions>

        <div class="adminSearchBox">
            <div class="adminSearchTop">
                <div class="adminSearchLeft">
                    <Search style="width: 1em; height: 1em; margin-right: 8px" />
                    <div>筛选搜索</div>
                </div>
                <div class="adminSearchRight">
                    <el-button @click="reset">重置</el-button>
                    <el-button type="primary" @click="queryList">查询搜索</el-button>
                </div>
            </div>
            <div class="parentSearchBox">
                <div class="adminSearch">
                    <span> 广告名称：</span>
                    <el-select v-model="couponHistoryListVal.useStatus" class="m-2" placeholder="请选择" size="default">
                        <el-option v-for="item in options" :key="item.type" :label="item.label" :value="item.type" />
                    </el-select>
                </div>
                <div class="adminSearch">
                    <span> 订单编号:</span>
                    <el-input size="default" v-model="couponHistoryListVal.orderSn" placeholder="请输订单编号" />
                </div>
            </div>
        </div>
        <!-- ---------------------下方表格---------------- -->

        <el-table :data="tableData" border :header-cell-style="{
            background: '#e2d2d2',
        }">
            <el-table-column prop="couponCode" label="优惠码">
            </el-table-column>
            <el-table-column prop="memberNickname" label="领取会员">
            </el-table-column>
            <el-table-column prop="memberNickname" label="领取方式">
            </el-table-column>
            <el-table-column label="领取时间">
                <template #default="scoped">
                    <div>
                        {{ dayjs(scoped.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="orderCount" label="当前状态">
                未使用
            </el-table-column>
            <el-table-column label="使用时间">
                暂无
            </el-table-column>
            <el-table-column label="订单编号">
                N/A
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination v-model:current-page="paginationParams.pageNum" v-model:page-size="paginationParams.pageSize"
                :page-sizes="[5, 10, 15]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" :flashRuleForm="tableData" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import useTable from '@/hooks/components/useTable'
import { useRoute } from 'vue-router';
import { dayjs } from 'element-plus';

import * as http from '@/request/http';
import { Search } from '@element-plus/icons-vue'

const route = useRoute()

const adminSearchVal = reactive({
    name: '',
    type: ''
})
const myData = ref<MyCouponListDetailModel>()
http.coupon.getCouponListById(Number(route.query.id)).then(
    res => {
        console.log(res.data);
        myData.value = res.data
    }
)

const reset = () => {
    adminSearchVal.type = ''
    adminSearchVal.name = ''
}
// 优惠码表格
const couponHistoryListVal = reactive({
    couponId: route.query.id,
    useStatus: '',
    orderSn: ''
})
const options = [
    {
        type: '0',
        label: '未使用',
    },
    {
        type: '1',
        label: '已使用',
    },
    {
        type: '2',
        label: '未过期',
    },
]

const { tableData, paginationParams, handleSizeChange, handleCurrentChange, queryList } = useTable(http.coupon.couponHistoryList, couponHistoryListVal)

</script>

<style scoped>
.parentSearchBox {
    display: flex;
    padding: 5px;
}

.adminSearchBox {
    margin: 40px 0;

    padding: 20px;
    height: 90px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .adminSearchTop {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .adminSearchLeft {

            display: flex;
            align-items: center;
        }
    }
}

.adminSearch {
    padding-left: 50px;
    padding-top: 20px;
    margin-right: 40px;

    .el-input {
        width: 190px;
    }
}

:deep(.el-table__cell) {
    width: 16.66667%;
}

:deep(.cell) {
    text-align: center;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

:deep(.el-descriptions__cell) {
    text-align: center !important;
    width: 290px !important;
}
</style>